<template>
<div class="content">
  <el-container>
    <el-header style="height: 110px">
      <div class="header">
        <div class="logo">
          <img src="@/assets/image/logoa.png" alt="奥云网络" />
        </div>
        <div class="nav" @mouseenter="nomouseEnter">
          <ul>
            <li
              v-for="(item, index) in list"
              :key="item + index"
              :class="xb === index ? 'active' : ''"
              @click="Theindex(index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="user" @mouseenter="mouseEnter">
          <router-link router-link to="/Personal">
            <img src="@/assets/image/user.png" alt="" /><span
              >&nbsp;&nbsp;个人中心</span
            >
          </router-link>
        </div>
      </div>
    </el-header>
    
     
      <el-main>
        <router-view></router-view>
      </el-main>
     
      <el-footer style="height:347px">
        <div class="foot">
          <div class="logoa">
            <img src="../../assets/image/logob.png" alt="奥云网络" />
          </div>
          <div class="browser">
            <li v-for="item in lista" :key="item">{{ item }}</li>
          </div>
          <div class="more">
            <li v-for="item in listb" :key="item">{{ item }}</li>
          </div>
          <div class="profile">
            <li v-for="item in listc" :key="item">{{ item }}</li>
          </div>
          <div class="information">
            <li>深圳奥云计算机科技有限公司</li>
            <li>邮箱：aoufilecoin@gmail.com</li>
            <li>地址：深圳市福田区上梅林卓越城二期B座1203A</li>
          </div>
          <div class="ewm">
            <p>扫描关注官方微信</p>
            <img
              src="../../assets/image/ewm.png"
              alt
              style="position: relative; left: 18px; top: -10px"
            />
          </div>
        </div>
      </el-footer>
  </el-container>
</div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      isActive: false,
      xb: 1,
      list: ["首页", "区块浏览器", "服务内容", "OEM", "新闻动态", "关于奥云"],
      lista: [
        "浏览器",
        "比特币浏览器",
        "以太坊浏览器",
        "泰达币浏览器",
        "访问更多",
      ],
      listb: ["了解更多", "关于奥云", "区块浏览器", "IPFS白皮书", "访问更多"],
      listc: ["公司简介", "项目进展", "合作伙伴", "服务条款", "隐私政策"],
    };
  },
  methods: {
    Theindex(index) {
      this.xb = index;
      if (this.xb == 0) {
        this.$router.push("/Index/View");
      }
    },
    exit() {
      this.$store.commit("ExistLogin");
      this.$message({
        message: "退出登录成功",
        type: "success",
      });

      this.$router.push({
        path: "/",
      });
    },
    mouseEnter() {
      this.isActive = true;
    },
    nomouseEnter() {
      this.isActive = false;
    },
  },
};
</script>
<style   scoped>
.el-header {
  width: 100%;
  min-width: 1280px;
  background-color: #006ab7;
  color: #333;
  line-height: 60px;
}

.header {
  width: 1190px;
  display: flex;
  height: 52px;
  margin: auto;
  position: relative;
  top: 55px;
}
.header > div:nth-of-type(1) {
  flex: 1;
}
.header > div:nth-of-type(2) {
  flex: 7;
}
.header > div:nth-of-type(3) {
  flex: 1.2;
}

.logo img {
  width: 114px;
  height: 37px;
}
.nav ul li {
  display: inline-block;
  width: 80px;
  height: 38px;
  line-height: 34px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  margin-left: 70px;
  position: relative;
}
.active {
  border-bottom: 4px solid #ffffff;
}
.foot {
  width: 1190px;
  display: flex;
  margin: auto;
  position: relative;
  top: 100px;
}
.foot > div:nth-of-type(1) {
  flex: 1;
}
.foot > div:nth-of-type(2) {
  flex: 1;
}
.foot > div:nth-of-type(3) {
  flex: 1;
}
.foot > div:nth-of-type(4) {
  flex: 1;
}
.foot > div:nth-of-type(5) {
  flex: 1;
}
.foot > div:nth-of-type(6) {
  flex: 1;
}
.el-container {
  min-height: 100%;
}
.el-main {
  text-align: center;
  width: 100%;
  min-width: 1280px;
  background-color: #ffffff;
}
.el-footer {
    background-color: #006ab7;
  color: #333;
  line-height: 60px;
  position: relative;
  bottom: 0;
  width: 100%;
}
.logoa img {
  width: 83px;
  height: 96px;
  position: relative;
  top: 30px;
}
div li {
  list-style: none;
}
.browser li {
  text-align: left;
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
}

.more li {
  text-align: left;
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
}

.profile li {
  text-align: left;
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
}
.information li {
  text-align: left;
  width: 320px;
  font-size: 14px;
  color: #ffffff;
  line-height: 30px;
}
.information {
  position: relative;
  top: 60px;
}

.ewm img {
  width: 100px;
  height: 100px;
}
.ewm p {
  color: white;
  font-size: 16px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.user img {
  margin-left: 30px;
  width: 32px;
  height: 32px;
}
span[data-v-498142aa] {
  padding-left: 0;
  float: none;
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
}
img {
  padding-left: 0;
  vertical-align: middle;
  display: inline-block;
  float: none;
  width: 24px;
  height: 24px;
}
span {
  padding-left: 0;
  float: none;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 1920px) {

}
</style>